<template lang="">
    <div>
        <van-nav-bar title="消息列表" />
        <div>
            <div class="item" @click="goToFuwu">
                <div class="item-left">
                    <van-image round width="4rem" height="4rem" 
               src="/static/img/fwmsg.png" class="img" />
                </div>
                <div class="item-right">
                    <div class="right-top">
                        <div>服务消息</div>
                        <div>2022-04-01</div>
                    </div>
                    <div class="msg-content">评价通知</div>
                </div>
            </div>
            <div class="item" @click="goToSys">
                <div class="item-left">
                    <van-image round width="4rem" height="4rem" 
               src="/static/img/sysmsg.png" class="img" />
                </div>
                <div class="item-right">
                    <div class="right-top">
                        <div>系统消息</div>
                        <div>2022-04-01</div>
                    </div>
                    <div class="msg-content">评价通知</div>
                </div>
            </div>
            <div class="item">
                <div class="item-left">
                    <van-image round width="4rem" height="4rem" 
               src="/static/img/usermsg.png" class="img" />
                </div>
                <div class="item-right">
                    <div class="right-top">
                        <div>姓名</div>
                        <div>2022-04-01</div>
                    </div>
                    <div class="msg-content">评价通知</div>
                </div>
            </div>
            <div class="item">
                <div class="item-left">
                    <van-image round width="4rem" height="4rem" 
               src="/static/img/usermsg.png" class="img" />
                </div>
                <div class="item-right">
                    <div class="right-top">
                        <div>姓名</div>
                        <div>2022-04-01</div>
                    </div>
                    <div class="msg-content">评价通知</div>
                </div>
            </div>
            <div class="item">
                <div class="item-left">
                    <van-image round width="4rem" height="4rem" 
               src="/static/img/usermsg.png" class="img" />
                </div>
                <div class="item-right">
                    <div class="right-top">
                        <div>姓名</div>
                        <div>2022-04-01</div>
                    </div>
                    <div class="msg-content">评价通知</div>
                </div>
            </div>
            <div class="item">
                <div class="item-left">
                    <van-image round width="4rem" height="4rem" 
               src="/static/img/usermsg.png" class="img" />
                </div>
                <div class="item-right">
                    <div class="right-top">
                        <div>姓名</div>
                        <div>2022-04-01</div>
                    </div>
                    <div class="msg-content">评价通知</div>
                </div>
            </div> 
           
        </div>
</div>
</template>
<script>
import { ref, reactive } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { getItem, getItemCate, addItemCate } from "../api/index"
import { getUserInfo, log, LOCAL_USER } from "../utils/user"
import { showToast, showConfirmDialog } from 'vant';
export default {
    setup() {
        const router = useRouter()
        const route = useRoute()
        const userInfo = getUserInfo();

        const goToFuwu = () => {
            router.push("/MessageFuWu")
        }
        const goToSys = () => {
            router.push("/MessageSystem")
        }
        return {
            goToFuwu,
            goToSys
        }
    }
}
</script>
<style scoped>
.item{
    padding: 5px 8px;
    display: flex;
    flex-direction: row;
    border-bottom: 1px solid #E3E4E5;
}
.item-left{
    width: 24%;
}
.item-right{
    width: 80%;
    display: flex;
    flex-direction: column;
}
.right-top{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 15px;
}
.msg-content{
    font-size: 15px;
    font-weight: 250;
}
</style>